<template>
	<el-input :minlength="configure.minlength" :maxlength="configure.maxlength || INPUT_MAX_LENGTH"
		:type="configure.inputType" v-model.trim="inputVal" :placeholder="configure.placeholder" @change="handleChange"
		@clear="handlerClear" :disabled="configure.disabled"
		:clearable="props.configure.clearable == undefined ? true : props.configure.clearable" />
</template>

<script lang="ts" setup>
import { INPUT_MAX_LENGTH } from "@/components/page-box/config"
import { ref, PropType, watch } from "vue";
import { PyInputType } from "./type";
const props = defineProps({
	//双向绑定的值
	modelValue: {
		type: String,
		required: false,
		default: "",
	},
	configure: {
		type: Object as PropType<PyInputType>,
		default: {
			disabled: false,
		},
	},
});

const inputVal = ref(props.modelValue || "");

const emits = defineEmits(["update:modelValue", "onChange"]);

const handleChange = () => {
	emits("onChange", inputVal.value);
	emits("update:modelValue", inputVal.value);
};

const handlerClear = () => {
	props.configure.onClear && props.configure.onClear();
};

watch(
	() => props.modelValue,
	val => {
		inputVal.value = val || "";
	},
	{ deep: true }
);
</script>
